<script>
import Papa from "papaparse";
export default {
  name: "Search",
  data() {
    return {
      //分页相关
      currentPage: 1,
      pageSize: 50,
      //表格相关
      tableData: [],
      tableColumnName: [],
      columnWidth: 180,
      total: 0,
      //日期选择相关
      dateRange: [],
      shortcuts: [
        {
          text: '上一周',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 7)
            return [start, end]
          },
        },
        {
          text: '上个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 1)
            return [start, end]
          },
        },
        {
          text: '前三个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 3)
            return [start, end]
          },
        },
      ]
    }
  },
  beforeMount() {
    const today = new Date()
    const yesterday = new Date()
    yesterday.setDate(today.getDate() - 1)
    this.dateRange = [yesterday, today]
  },
  methods: {
    handleClick() {
      if (this.dateRange.length !== 2) {
        return
      }
      this.$axios.get('/api/visitors/getVisitorsFromDateRange', {
        params: {
          startTime: this.dateRange[0],
          endTime: this.dateRange[1]
        }
      }).then(res => {
        this.refreshTable(res.data.data)
      })
    },
    refreshTable(data) {
      this.tableData = data
      if (this.tableData.length === 0) {
        return
      } else {
        this.tableColumnName = Object.keys(this.tableData[0])
      }
      this.total = this.tableData.length
      this.columnWidth = 100 / this.tableColumnName + "vh"
    },
    exportToCsv() {
      // exportData是el-table中绑定的:data数据
      const csv = Papa.unparse(this.tableData)

      // 创建一个Blob对象，并保存为CSV文件
      const blob = new Blob(["\uFEFF"+csv]);//添加utf-8的BOM头,供excel识别
      const link = document.createElement('a');
      const url = window.URL.createObjectURL(blob);
      link.href = url;
      link.download = '外来人员记录.csv';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    }
  }
}
</script>

<template>
  <h1 style="color: #2c3e50">指定时间段</h1>
  <div style="display: flex">
    <el-date-picker
        v-model="dateRange"
        type="datetimerange"
        :shortcuts="shortcuts"
        range-separator="To"
        start-placeholder="开始日期"
        end-placeholder="截止日期"
        style="flex-grow: 0"
    />
    <el-button type="primary" @click="handleClick" style="margin-left: 10px">查询</el-button>
    <el-button style="margin-left: auto;margin-right: 50px" @click="exportToCsv">导出</el-button>
  </div>


  <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            height="250" size="large" style="width: 100%;height: 65vh">
    <el-table-column v-for="item in tableColumnName" :prop="item" :label="item" :width="columnWidth"/>
  </el-table>

  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      size="default"
      :background="true"
      layout="prev, pager, next, jumper"
      :total="total"
      style="justify-content: center"
  />
</template>

<style scoped>

</style>